<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id='app'>
        {{ message }}
    </div>

    <script>

        const obj = {
            message: 'hhh',
            name: 'zc'
        }
        console.log(Object.keys(obj));
        Object.keys(obj).forEach(key => {
            let value = obj[key]
            console.log(value);
            Object.defineProperty(obj, key, {
                set(newValue) {
                    console.log('监听' + key + '的改变');
                    value = newValue
                    dep.notify()
                },
                get() {
                    console.log('获取' + key + '的改变');
                    return value
                }
            })
        })

        // 发布订阅者模式
        class Dep {
            constructor() {
                this.subs = []
            }
            addSub(watcher) {
                this.subs.push(watcher)
            }
            notify() {
                this.subs.forEach(item => {
                    item.update()
                })
            }
        }
        const dep = new Dep

        class Watcher {
            constructor(name) {
                this.name = name

            }
            update() {
                console.log(this.name + '发生update');
            }
        }
        const w1 = new Watcher('夏洛')
        dep.addSub(w1)
        const w2 = new Watcher('马冬梅')
        dep.addSub(w2)
        const w3 = new Watcher('袁华')
        dep.addSub(w3)



    </script>

    <script src='../node_modules/vue/dist/vue.js'>

    </script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: 'hhh'
            }
        })
    </script>

    <!-- 1.Vue监听数据的改变：通过object.defineproperty -->


</body>


</html>